require(['./config'],()=>{
    require(['template','header','zoom','footer','fly'],(template,header)=>{  //依赖于header模块 header模块又将header.HTML中的文件给加载出来
        class infoPage{
            constructor(){
                this.getList().then(()=>{
                    this.zoom(),
                    this.blur(),
                    this.changeCount().then(()=>{
                        this.addTocart()
                    })
                    
                }   
            )
        }
            getList(){
                let id = location.search.split("?")[1];
                console.log(id)
                return new Promise((resolve,reject)=>{
                    //http://www.xiongmaoyouxuan.com/api/detail?id=38549144&normal=1&sa=
                    $.get( `http://www.xiongmaoyouxuan.com/api/detail?id=${id}`,{normal:1,sa:''},resp=>{
                        if(resp.code == 200){
                            console.log(resp)
                            const photo = resp.data.detail.photo,
                                title = resp.data.share.title,
                                commodityHint = resp.data.detail.commodityHint,
                                price = resp.data.detail.price,
                                originPrice = resp.data.detail.originPrice,
                                couponValue =  resp.data.detail.couponValue,
                                saleNum = resp.data.detail.saleNum,
                                expireDate = resp.data.detail.expireDate,
                                descContentList = resp.data.detail.descContentList;
                                this.detail = {
                                    photo,
                                    title,
                                    id,
                                    commodityHint,
                                    price,
                                    originPrice,
                                    couponValue,
                                    saleNum,
                                    expireDate,
                                    descContentList
                                }    
                            $('.main-box-showshop-wrap').html(template('zoom-template',{...this.detail}));
                            // 渲染完成后才resolve
                            resolve()
                        }  
                    })    
                })   
            }
            
            zoom(){
                $('.main-box-showshop-wrap-showzoom').on('click','img',function(){
                    $(this).parent().parent().children().children().removeClass('zoomborder')
                    $(this).addClass('zoomborder');
                    $($(this).parents('.main-box-showshop-wrap-showzoom').children()[0]).attr('src',$(this).attr('src'));    
                })
                $('#zoom-img').elevateZoom({
                    gallery: 'gal1',
                })    
            }

            addTocart(){
                $('#addcart').on('click',(e)=>{
                    //取数据 
                    let cart = localStorage.getItem('cart');
                    let cartNum = parseInt($('.cartnum').val());
                    //判断是否已经有数据
                    if(cart){ 
                        //表示已经有数据
                        //现在的cart是一个字符串 先转成json  再push
                        cart = JSON.parse(cart);  //parse成数组
                        //判断购物车里已存在的数据中 是否包含当前数据
                        //用id去判断 用数组方法some 若存在 把数量加 （不定）  
                        const isExist = cart.some(shop=>{
                            return shop.id === this.detail.id;
                        })
                        
                        if(isExist){
                            //商品已经存在
                            //找到当前这件商品 count加cartNum （用map修改数组） map遍历的同时 返回值 返回新数组
                            
                            cart = cart.map(shop=>{
                                if(shop.id === this.detail.id){
                                    shop.count=parseInt(shop.count)+ cartNum;
                                }
                                return shop;//不满足条件就返回shop本身 满足就加  之后的cart就被修改好了
                            }) 
                        }else{
                            //当前商品不存在的时候 直接push存
                            cart.push({ ...this.detail, count: cartNum ,check:true})
                            
                        }
                        //不管if  else都存
                        localStorage.setItem('cart',JSON.stringify(cart))
                        }else{
                            //代表无数据
                            //如果要存 存一个数组  对象不能存多个呀 数组能存多条购物车数据  第一次加的时候 加上count存数量
                            localStorage.setItem('cart',JSON.stringify([{...this.detail,count:cartNum,check:true}])); //将detail放在数组里 长度为1

                    }

                    //上面是将点击了加入购物车的商品 接下来是点击之后 实现抛物线
                    $('<div class="fly">').fly({
                        start:{
                          left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                          top: e.clientY,  //开始位置（必填）
                        },
                        end:{
                          left: $('.mycart').offset().left, //结束位置（必填）
                          top: $('.mycart').offset().top  - $(window).scrollTop(),  //结束位置（必填）
                        },
                        speed: 0.8, //越大越快，默认1.2
                        vertex_Rtop: 100-$(window).scrollTop(), //运动轨迹最高点top值，默认20
                        onEnd: function(){
                          this.destroy()
                        } //结束回调
                    })
                    //点击添加购物车后 购物车数量增加
                    header.calcCartCount();
                })
            } 

            //改变 加多少件商品到购物车中 有增加减少
            changeCount(){
                return new Promise((resolve,reject)=>{
                    $('.info-add').on('click',function(){
                        
                        let num = parseInt($('.cartnum').val()) + 1;
                        $('.cartnum').val(num)
                    });
                    $('.info-sub').on('click',function(){
                        if(parseInt($('.cartnum').val()) == 1){
                            return
                        }
                        let num = parseInt($('.cartnum').val()) - 1;
                        
                        $('.cartnum').val(num)
                    })
                    resolve()
                })   
            }
            //
            blur(){
                $('.cartnum').on('blur',()=>{
                    let cartnum = $('.cartnum').val();
                    if($('.cartnum').val()<1){
                        $('.cartnum').val("1")
                    }else{
                        $('.cartnum').val(cartnum)
                    }
                }) 
               
            }
           
        }
        new infoPage();
    })
})